<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #user {
            margin-top: 50px;
            margin-left: 120px;
            color: coral;
        }
        #seek {
            margin-top: 50px;
            margin-left: 820px;

        }

        .bb {
            margin-top: 100px;
            border-right: 20px;
            margin-left: 550px;
        }

        .title {
            background-color: darksalmon;
            width: 750px;
            height: 150px;
            font-size: 50px;
            margin-top: -240px;
            margin-left: 520px;
        }

        #hold {
            width: 750px;
            height: auto;
            margin-top: auto;
            margin-left: 520px;
        }

        .p1 .c1 {
            height: 500px;

            width: 500px;
        }

        .p2 .c1 {
            height: 500px;

            width: 500px;
            margin-top: auto;
        }

        .p1 {
            border: 2px solid rgb(200, 200, 200);
            text-align: center;
            font-size: 20px;
        }

        .p2 {
            border: 2px solid rgb(200, 200, 200);
            text-align: center;
            text-align: center;
            font-size: 20px;
            border-bottom: 10px;
        }

        .go {
            background-color: firebrick;
            color: floralwhite;
            font-weight: bold;
            font-size: 30px;
            height: 40px;
            width: 100px;
        }

        #pageviews {
            margin:0px;
            padding: 0px;
            width: 150px;
            height: auto;
            margin-left: 100px;
            margin-top: 100px;
            background-color: blanchedalmond;
        }

        #pageviews p{
            margin:0px;
            padding: 0px;
            font-size: 20px;
            color: brown;
            font-weight: bold;
        }
        #leaderboard{
            margin:0px;
            padding: 0px;
            margin-top: 100px;
            margin-left: 100px;
            border: 2px solid blanchedalmond;
            height: 150px;
            width: 150px;
        }
    </style>
</head>

<body>
<div id="user">
    <p>${username} 你好</p>
    <p>ID:${userid}</p>
</div>
<form action="seekgoods" method="post">
    <div id="seek">
        <input type="search" style="width:150px;height:30px ;" placeholder="请输入商品名" name="shopName" list="kk"><button type="submit" style="height: 30px;color:brown" >搜索</button>
    </div>
</form>
<div id="pageviews">
    <p style="margin-top: 45px;">首页浏览量${pageviews}</p>
</div>
<div id="leaderboard">
    <p style="font-size: 20px;font-weight: bold;color: lightsalmon;text-align: center;">销售排行榜</p>
    <p style="color: brown;font-weight: bold;font-size: 18px;text-align: center;">top1  ${o}</p>
    <p style="color: crimson;font-weight: bold;font-size: 18px;text-align: center;">top2  ${t}</p>
    <%--<p style="color:deeppink;font-weight: bold;font-size: 18px;text-align: center;">top3  ${th}</p>--%>
</div>
<datalist id="kk">
    <option>top1  ${o}</option>
    <option>top2  ${t}</option>
    <%--<option>top3  ${th}</option>--%>
</datalist>
<div id="shop">
    <form action="spikeshop" method="post">
        <div class="title">
            <h3 style="color: brown;text-align: center;">限时秒杀商品</h3>
<%--            <h5 style="font-style: italic;font-size: 20px;text-align: center;">(秒杀商品一个ID限购一个)</h5>--%>
        </div>
        <div id="hold">
            <div class="p1">
                <img class="c1" src="../img/iphone11.jpg">
                <p class="details">
                <p>商品名：iphone11</p>
                <p id="b">售价：4688</p>
                <button class="go"  name="shopId" value="1">秒杀</button>
                </p>
            </div>
            <div class="p2">
                <img class="c1" src="../img/ipad2019.jpg">
                <p class="details"></p>
                <p>商品名：ipad2019</p>
                <p id="c">售价：2888</p>
                <button class="go"  name="shopId"  value="2">秒杀</button>
                </p>
            </div>
        </div>
    </form>
</div>

</body>

</html>